<template>
  <div class="recommendBox" :style="outModuleCss">
    <div :style="moduleBgCss" class="module-bg"></div>
    <div class="recommendContent">
      <div class="title">
        <span class="across"></span>
        <span class="line" style="margin-left: 5px"></span>
        <span style="margin: 0 16px">为您推荐</span>
        <span class="line" style="margin-right: 5px"></span>
        <span class="across"></span>
      </div>
      <div class="goodsList">
        <div class="goodsItem">
          <div class="goodPic">
            <img src="@/assets/images/diy/default_img.png" alt="" />
          </div>
          <div class="goodInfo">
            <div class="goodName">
              vivo Y30 8GB+128GB 水漾蓝 5000mAh大电池大容量
            </div>
            <div class="goodPrice">
              <div class="price">
                <span>￥</span>
                <span>1299.00</span>
              </div>
              <!-- <div class="vip">
                <span>￥1299.00</span>
                <img src="" alt="">
              </div> -->
              <div class="old">
                <span>￥620.00</span>
              </div>
            </div>
            <div class="count">
              <span>销量9999+</span>
              <span>95%好评</span>
            </div>
          </div>
        </div>
        <div class="goodsItem">
          <div class="goodPic">
            <img src="@/assets/images/diy/default_img.png" alt="" />
          </div>
          <div class="goodInfo">
            <div class="goodName">
              vivo Y30 8GB+128GB 水漾蓝 5000mAh大电池大容量
            </div>
            <div class="goodPrice">
              <div class="price">
                <span>￥</span>
                <span>1299.00</span>
              </div>
              <!-- <div class="vip">
                <span>￥1299.00</span>
                <img src="" alt="">
              </div> -->
              <div class="old">
                <span>￥620.00</span>
              </div>
            </div>
            <div class="count">
              <span>销量9999+</span>
              <span>95%好评</span>
            </div>
          </div>
        </div>
        <div class="goodsItem">
          <div class="goodPic">
            <img src="@/assets/images/diy/default_img.png" alt="" />
          </div>
          <div class="goodInfo">
            <div class="goodName">
              vivo Y30 8GB+128GB 水漾蓝 5000mAh大电池大容量
            </div>
            <div class="goodPrice">
              <div class="price">
                <span>￥</span>
                <span>1299.00</span>
              </div>
              <!-- <div class="vip">
                <span>￥1299.00</span>
                <img src="" alt="">
              </div> -->
              <div class="old">
                <span>￥620.00</span>
              </div>
            </div>
            <div class="count">
              <span>销量9999+</span>
              <span>95%好评</span>
            </div>
          </div>
        </div>
        <div class="goodsItem">
          <div class="goodPic">
            <img src="@/assets/images/diy/default_img.png" alt="" />
          </div>
          <div class="goodInfo">
            <div class="goodName">
              vivo Y30 8GB+128GB 水漾蓝 5000mAh大电池大容量
            </div>
            <div class="goodPrice">
              <div class="price">
                <span>￥</span>
                <span>1299.00</span>
              </div>
              <!-- <div class="vip">
                <span>￥1299.00</span>
                <img src="" alt="">
              </div> -->
              <div class="old">
                <span>￥620.00</span>
              </div>
            </div>
            <div class="count">
              <span>销量9999+</span>
              <span>95%好评</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";
export default {
  name: "userRecommend",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  components: {},
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.recommendBox {
  width: 100%;
  position: relative;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .recommendContent {
    width: 100%;
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #262626;
      margin: 18px 0;
      .across {
        width: 24px;
        height: 1px;
        background-color: #cecece;
      }
      .line {
        width: 1px;
        height: 6px;
        background-color: #cecece;
      }
    }
    .goodsList {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      .goodsItem {
        width: 49%;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 5px;
        .goodPic {
          width: 100%;
          height: 177px;
          background-color: #e4e4e4;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .goodInfo {
          width: 100%;
          padding: 5px 8px;
          background-color: #fff;
          .goodName {
            width: 100%;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #262626;
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            word-wrap: break-word;
          }
          .goodPrice {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            margin: 5px 0;
            div {
              margin-right: 8px;
            }
            .price {
              color: #f0250e;
              font-size: 12px;
              font-weight: 600;
              font-family: PingFang SC;
              span:nth-child(2) {
                font-size: 17px;
              }
            }
            .vip {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #262626;
              font-weight: 600;
              font-family: PingFang SC;
            }
            .old {
              font-size: 12px;
              color: #8c8c8c;
              font-family: PingFang SC;
              text-decoration: line-through;
            }
          }
          .count {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #8c8c8c;
            font-family: PingFang SC;
            span {
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
}
</style>